<template>
	<view>
		<u-radio-group v-model="value" v-bind='$attrs?.radioGroup' style="width: 100%;">
			<u-radio v-for="(item, index) in options" v-bind='$attrs?.radio' :key="index" :label="item.name"
				:name="item.payWay" class="u-radio-item">
				<view class="radio-item">
					<view class="radio-checked">
						<u-icon name="youshangdagou" custom-prefix="custom-icon" size="20" color="#B71616" />
					</view>
					<u-image width="40rpx" height="40rpx" :src='getIcon(item.name)'></u-image>
					<text style="padding-left: 10rpx;">{{payMap[item.name]}} </text>
				</view>
			</u-radio>
		</u-radio-group>
	</view>
</template>

<script setup>
	import {
		ref,
	} from 'vue'
	const props = defineProps({
		options: {
			type: Array,
			default: () => [],
		},
	})
	const value = defineModel('modelValue')

	const payMap = ref({
		weixin: '微信',
		alipay: '支付宝',
		yinlian: '银联',
	})

	function getIcon(name) {
		return `/static/images/${name}.svg`
	}
</script>

<style lang="scss" scoped>
	:deep(.u-radio-group.u-clearfix) {
		justify-content: space-between;

		&:after,
		&:after {
			content: '1411';
			display: none;
		}

		.u-radio.u-radio-item {
			width: 47% !important;
		}
	}

	.radio-item {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		border: 1px solid #D8D8D8;
		border-radius: 12rpx;
		padding: 20rpx;
		overflow: hidden;

		.radio-checked {
			opacity: 0;
			display: flex;
			align-items: flex-start;
			justify-content: flex-end;
			width: 48rpx;
			height: 48rpx;
			position: absolute;
			right: 0;
			top: 1rpx;
		}
	}

	:deep(.u-radio-item) {
		width: 48%;
	}

	:deep(.u-radio.u-radio-item .u-radio__icon-wrap) {
		display: none;
	}

	:deep(.u-radio__label) {
		margin: 0;
		width: 100%;
	}

	:deep(.u-radio.u-radio-item .u-radio__icon-wrap.u-radio__icon-wrap--checked+.u-radio__label .radio-item) {
		border: 1px solid #d80700;

		.radio-checked {
			opacity: 1;
		}
	}
</style>